/**
 * data 必须是一个函数
 * 
 * Vue在创建实例的过程中调用data函数
 * 返回数据对象
 * 通过响应式包装后存储在实例的$data
 * 并且实例可以直接越过$data访问属性
 */

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      title: 'This is my Title'
    }
  },
  template: `
    <h1>{{ title }}</h1>
    <h2>{{ auther }}</h2>
  `,
  methods: {
    change() {
      this.title = 'your title'
    }
  }
})

const vm = app.mount('#app')

console.log(vm)
console.log(vm.$data.title)
console.log(vm.title) // 能越过 $data 访问

vm.$data.title = 'This is your data'
vm.title = 'This is my title'
console.log(vm)

// 实例增加  $data中没有！
// $data 响应式数据对象
vm.auther = 'wgf'
vm.$data.auther = 'wgf'

// $,_,__ 开头的都是Vue内置API
// 开发者要尽量避免用这些前缀命名变量和方法名
// console.log(vm)

// data 为什么必须是一个函数
// const MyComponent = {
//   data: function () {
//     return {
//       a: 1
//     }
//   },
//   template: `
//   <h1>{{ a }}</h1>
//   `
// }

// createApp(MyComponent).mount('#app')


var vm = new Vue({
  data() {
    return {
      a: 1,
      b: 2
    }
  }
})

function Vue(obj) {
  this.$data = obj.data()

  var _this = this

  for (var key in this.$data) {
    // 防止闭包影响，需要立即执行函数
    (function (k) {
      // Object.defineProperty(_this, k, {
      //   get () {
      //     return _this.$data[k]
      //   },
      //   set (newValue) {
      //     _this.$data[k] = newValue
      //   }
      // })

      _this.__definedGetter__(k, function () {
        return _this.$data[k]
      })
      _this.__definedSetter__(k, function (newValue) {
        _this.$data[k] = newValue
      })
    }(key))
  }
}

console.log(vm.a)

vm.b = 3

console.log(vm)